import React, { useEffect } from 'react'
import { useState } from 'react'
import { useHistory } from 'react-router-dom'

function Box(props,choose){
    return(
        <div className='Box' style={{width:110,display:'flex',cursor:'pointer',justifyContent:'center',alignItems:'center'}}>
            <div className='title' style={{textAlign:'center',width:100,lineHeight:'50px',color:props.tag===choose.Tab?'#007FFF':'#71777C'}}>
                {props.name}
            </div>
        </div>
    )
}

export function BottomBar(props){
    // eslint-disable-next-line
    const [a,setA] = useState([{tag:'hot',name:'热门'},{tag:'new',name:'最新'},{tag:'history',name:'历史'}])
    const history = useHistory()
    useEffect(()=>{
        const hot = document.getElementsByClassName('hot')[0]
        const newest = document.getElementsByClassName('new')[0]
        const historyPage = document.getElementsByClassName('history')[0]
        // console.log(history)
        // const history = document.getElementsByClassName('热门')[0]
        const toHot=()=>{
            // document.documentElement.scrollTop=0
            history.push(history.location.pathname)
            window.location.reload()
        }
        const toNewest=()=>{
            history.push(history.location.pathname+'?sort=new')
            window.location.reload()
            // this.forceUpdate()
        }
        const toHistory=()=>{
            history.push('/history')
            window.location.reload()
        }
        hot.addEventListener('click',toHot)
        newest.addEventListener('click',toNewest)
        historyPage.addEventListener('click',toHistory)
        return()=>{
        newest.removeEventListener('click',toNewest)
        hot.removeEventListener('click',toHot)
        historyPage.removeEventListener('click',toHistory)
        }
    })
    useEffect(()=>{
        const bar = document.getElementsByClassName('BottomBar')[0]
        const goTop=()=>{
            document.documentElement.scrollTop=0
        }
        bar.addEventListener('click',goTop)
        return()=>{
            bar.removeEventListener('click',goTop)
        }
    })
    // useEffect(()=>{})
    return (
        <div>
            <div className='BottomBar' style={{width:375,height:50,backgroundColor:'#fff',color:'#71777C',zIndex:'200',position:'fixed',bottom:0,display:'flex',justifyContent:'center'}}>
                    {a.map((i,index)=>{
                        return <div key={index} className={i.tag}>{Box(i,props)}</div>
                    })}
            </div>
        </div>
    )
}